class Reveal {
    constructor(element, options = {}) {
        this.modal = element;
        this.defaults = {
            animation: 'fadeAndPop', // fade, fadeAndPop, none
            animationSpeed: 300,
            closeOnBackgroundClick: true,
            dismissModalClass: 'close-reveal-modal'
        };
        this.options = { ...this.defaults, ...options };
        this.locked = false;
        this.modalBG = null;

        this.init();
    }

    init() {
        this.createModalBG();
        this.bindEvents();
        this.open();
    }

    createModalBG() {
        if (!document.querySelector('.reveal-modal-bg')) {
            this.modalBG = document.createElement('div');
            this.modalBG.className = 'reveal-modal-bg';
            this.modal.parentNode.insertBefore(this.modalBG, this.modal.nextSibling);
        } else {
            this.modalBG = document.querySelector('.reveal-modal-bg');
        }
    }

    bindEvents() {
        // 关闭按钮事件
        const closeButton = this.modal.querySelector('.' + this.options.dismissModalClass);
        if (closeButton) {
            closeButton.addEventListener('click', () => this.close());
        }

        // 背景点击关闭
        if (this.options.closeOnBackgroundClick) {
            this.modalBG.style.cursor = 'pointer';
            this.modalBG.addEventListener('click', () => this.close());
        }

        // ESC 键关闭
        document.addEventListener('keyup', (e) => {
            if (e.key === 'Escape') this.close();
        });
    }

    calculateCenter() {
        const windowHeight = window.innerHeight;
        const modalHeight = this.modal.offsetHeight;
        const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
        
        // 计算居中位置
        return scrollTop + (windowHeight - modalHeight) / 2;
    }

    open() {
        if (this.locked) return;
        this.lock();

        const centerPosition = this.calculateCenter();

        switch (this.options.animation) {
            case 'fadeAndPop':
                this.modal.style.cssText = `
                    top: ${centerPosition - 50}px;
                    opacity: 0;
                    visibility: visible;
                    position: absolute;
                    z-index: 101;
                `;
                
                this.fadeIn(this.modalBG, this.options.animationSpeed / 2);
                
                setTimeout(() => {
                    this.modal.style.transition = `all ${this.options.animationSpeed}ms`;
                    this.modal.style.top = `${centerPosition}px`;
                    this.modal.style.opacity = '1';
                    setTimeout(() => this.unlock(), this.options.animationSpeed);
                }, this.options.animationSpeed / 2);
                break;

            case 'fade':
                this.modal.style.cssText = `
                    opacity: 0;
                    visibility: visible;
                    top: ${centerPosition}px;
                    position: absolute;
                    z-index: 101;
                    transition: opacity ${this.options.animationSpeed}ms;
                `;
                
                this.fadeIn(this.modalBG, this.options.animationSpeed / 2);
                
                setTimeout(() => {
                    this.modal.style.opacity = '1';
                    setTimeout(() => this.unlock(), this.options.animationSpeed);
                }, this.options.animationSpeed / 2);
                break;

            default: // none
                this.modal.style.cssText = `
                    visibility: visible;
                    top: ${centerPosition}px;
                    position: absolute;
                    z-index: 101;
                `;
                this.modalBG.style.display = 'block';
                this.unlock();
        }

        // 添加窗口大小改变时重新计算位置的处理
        this.resizeHandler = () => {
            const newCenterPosition = this.calculateCenter();
            this.modal.style.top = `${newCenterPosition}px`;
        };
        window.addEventListener('resize', this.resizeHandler);
    }

    close() {
        if (this.locked) return;
        this.lock();

        // 移除 resize 事件监听
        if (this.resizeHandler) {
            window.removeEventListener('resize', this.resizeHandler);
        }

        const centerPosition = this.calculateCenter();

        switch (this.options.animation) {
            case 'fadeAndPop':
                setTimeout(() => {
                    this.fadeOut(this.modalBG, this.options.animationSpeed);
                }, this.options.animationSpeed);

                this.modal.style.transition = `all ${this.options.animationSpeed / 2}ms`;
                this.modal.style.top = `${centerPosition - 50}px`;
                this.modal.style.opacity = '0';
                
                setTimeout(() => {
                    this.modal.style.cssText = `
                        visibility: hidden;
                        position: absolute;
                        z-index: 101;
                    `;
                    this.unlock();
                }, this.options.animationSpeed / 2);
                break;

            case 'fade':
                setTimeout(() => {
                    this.fadeOut(this.modalBG, this.options.animationSpeed);
                }, this.options.animationSpeed);

                this.modal.style.transition = `opacity ${this.options.animationSpeed}ms`;
                this.modal.style.opacity = '0';
                
                setTimeout(() => {
                    this.modal.style.cssText = `
                        visibility: hidden;
                        position: absolute;
                        z-index: 101;
                    `;
                    this.unlock();
                }, this.options.animationSpeed);
                break;

            default: // none
                this.modal.style.visibility = 'hidden';
                this.modalBG.style.display = 'none';
                this.unlock();
        }
    }

    fadeIn(element, duration) {
        element.style.opacity = '0';
        element.style.display = 'block';
        element.style.transition = `opacity ${duration}ms`;
        setTimeout(() => element.style.opacity = '1', 10);
    }

    fadeOut(element, duration) {
        element.style.opacity = '0';
        element.style.transition = `opacity ${duration}ms`;
        setTimeout(() => element.style.display = 'none', duration);
    }

    lock() {
        this.locked = true;
    }

    unlock() {
        this.locked = false;
    }
}

// 添加到全局作用域
window.Reveal = Reveal; 